Frontend Forever App
We have a mobile app for you to download and use. And you can unlock many features in the app.
Get it now
Intall Later
Run
HTML
CSS
Javascript
Output
Document
@charset "UTF-8"; @import url(https://fonts.googleapis.com/css?family=Nunito+Sans:300,400,600,700,800); *, :after, :before { box-sizing: border-box; padding: 0; margin: 0; } body{ background-color: black; overflow: hidden; } .container{ position: fixed; width: 75%; height: 75%; margin: auto; padding: 0; } .container{ top: 50%; left: 50%; transform: translate(-50%, -50%); } .container{ display: grid; grid-template-columns: auto auto auto auto auto; grid-template-rows: auto auto auto auto auto; gap: 2px; } .items{ position: relative; width: 100%; height: 100%; margin: auto; padding: 0; overflow: hidden; background-color: rgb(60, 60, 60); } .slides{ width: 0%; height: 100%; margin: auto; padding: 0; position: relative; background-color: rgb(30, 30, 30); } @keyframes value1 { from, to{width: 0%; transform: translateX(0%);} 50%{width: 100%; transform: translateX(100%);} } @keyframes value2 { from, to{width: 0%; transform: translateX(0%);} 50%{width: 100%; transform: translateX(-100%);} } #toRight{ animation: value1 10s ease-in-out infinite; } #toLeft{ animation: value2 10s ease-in-out infinite; }
console.log("Event Fired") const obj = document.getElementsByClassName("slides"); for(let i = 0; i != Number.parseInt(obj.length); i++){ if(i % 2 == 0){ obj[i].style.float = "left" obj[i].setAttribute("id", "toRight") continue; } obj[i].style.float = "right" obj[i].setAttribute("id", "toLeft") }